<template>
  <uni-popup ref="popup" type="bottom" @change="change">
    <view class="cart-popup">
      <view class="header">
        <view class="order-type">
          <view class="font-weight-bold">已添加商品</view>
          <!-- <view class="extra">自提/外送</view> -->
        </view>
        <view class="flex align-center" @tap="clear">
          <uni-icons custom-prefix="iconfont" type="icon-empty"></uni-icons>
          <view style="font-size: 30rpx">清空</view>
        </view>
      </view>
      <view style="height: 26rpx; background-color: #f7f7f7"></view>
      <scroll-view scroll-y class="content">
        <view class="goods-container">
          <view class="products">
            <view
              class="product"
              v-for="(good, key) in cart"
              :key="key"
              @tap="goToDetail(good)"
            >
              <image
                :src="imageUrl + good.FThumbImage"
                mode="aspectFit"
                class="image"
              ></image>
              <!-- <image src="/static/image/Mx.png" mode="aspectFit" class="image"></image> -->

              <view class="content">
                <view class="name">{{ good.FName }}</view>
                <view class="price">
                  <view>
                    <text class="symbol">￥</text>
                    <text>{{ good.FPrice.toFixed(2) }}</text>
                  </view>
                  <actions
                    :number="cart.find((i) => i.FGoodsID == good.FGoodsID).FQty"
                    @add="handleAddToCart(good)"
                    @minus="handleMinusFromCart(good)"
                  />
                </view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </uni-popup>
</template>

<script>
import Actions from "../../pages/tab_bar/components/actions/actions.vue";
import { useShop } from "../../store/useShop";
import { useUser } from "../../store/useUser";
import {
  uGetStorageSync,
  uModal,
  uNavigateTo,
  uToast,
} from "../../utils/uniUtils";
export default {
  components: {
    Actions,
  },
  props: {
    cart: {
      type: Array,
      default: (() => [])().valueOf(),
    },
  },
  computed: {},
  mounted() {
    console.log("cart", this.cart);
  },
  methods: {
    goToDetail(goods) {
      uNavigateTo("/pages/goods/detail?id=" + goods.FGoodsID);
    },
    open() {
      this.$refs.popup.open();
    },
    close() {
      this.$refs["popup"].close();
    },
    change({ show }) {
      this.$emit("change", show);
    },
    add(item) {
      this.$emit("add", item);
    },
    minus(item) {
      this.$emit("minus", item);
    },
    async handleAddToCart(product) {
      //添加到购物车
      if (useUser().hasLogin) {
        await useShop().AddToCart(product.FGoodsID, product.FMallPrice);
        this.$emit("updateCart", {});
      } else {
        uNavigateTo("/pages/login/login");
        /*    if (uGetStorageSync("hasBindStore")) {
        } else {
          uToast("未绑定店铺~", "error");
        } */
      }
    },
    async handleMinusFromCart(product) {
      //从购物车减商品
      if (useUser().hasLogin) {
        if (product.FQty <= 1 && !(await uModal("要删除该商品吗？"))) return;

        await useShop().MinusToCart(product.FGoodsID);
        this.$emit("updateCart", {});

        if (useShop().cart.length == 0) {
          this.close();
        }
      } else {
        uNavigateTo("/pages/login/login");
      }
    },
    clear: async function () {
      if (useUser().hasLogin) {
        if (!(await uModal("确定要清空购物车吗?"))) return;
        if ( await useShop().ClearCart()) {
          uToast("清空成功!");
        }
        this.$emit("updateCart", {});
        this.close();
      } else {
        uNavigateTo("/pages/login/login");
        /*      if (uGetStorageSync("hasBindStore")) {
        } else {
          uToast("未绑定店铺~", "error");
        } */
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.cart-popup {
  background-color: #fff;
  padding-bottom: 80px;
  width: 100%;
}

.header {
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid rgba($color: #c8c7cc, $alpha: 0.6);
  font-size: 24rpx;
  color: #777;

  .order-type {
    display: flex;
    align-items: center;
    font-size: 30rpx;
    color: #343434;

    .extra {
      margin-right: 10rpx;
      border: 2rpx solid #e0a32d;
      font-size: 18rpx;
      padding: 2rpx 10rpx;
      color: #e0a32d;
      margin-left: 10rpx;
    }
  }

  .delete-btn {
    width: 46rpx;
    height: 46rpx;
    margin-right: 10rpx;
  }
}

.content {
  max-height: calc(100vh - 700rpx);

  .goods-container {
    width: 100%;
    height: 100%;
    padding: 5px 0;
  }

  .list {
    display: flex;
    flex-direction: column;
    margin-bottom: 30rpx;

    .item {
      display: flex;
      align-items: stretch;
      padding: 30rpx 0;
      position: relative;

      .left {
        flex-shrink: 0;
        display: flex;
        align-items: center;

        .image {
          width: 110rpx;
          height: 110rpx;
        }
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 28rpx;
        color: #343434;
        margin-left: 10rpx;

        .name-and-materials {
          display: flex;
          flex-direction: column;
          margin-bottom: 20rpx;

          .name {
            font-weight: bold;
            font-size: 30rpx;
          }

          .materials {
            font-size: 24rpx;
            color: #777;
          }
        }

        .price-and-actions {
          display: flex;
          justify-content: space-between;

          .price {
            color: #ec3e40;
          }
        }
      }
    }
  }
}
// 必选
.required-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  & > view {
    line-height: 50rpx;
  }
}

// 数字
.num-btn {
  display: flex;
  min-width: 150rpx;
  justify-content: space-between;

  .add-btn,
  .minus-btn {
    width: 44rpx;
    height: 44rpx;
  }

  .number {
    font-size: 30rpx;
    width: 1.3rem;
    height: 1.3rem;
    line-height: 1.3rem;
    text-align: center;
    border-radius: 100%;
  }
}
// 删除线
.isVip {
  text-decoration: line-through;
}

.wrapper {
  height: auto;

  .menu-item {
    padding: 30rpx 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 24rpx;
    color: #333;
    overflow: hidden;

    &:nth-last-child(1) {
      margin-bottom: 100rpx;
    }

    .image {
      width: 50rpx;
      height: 50rpx;
    }

    .title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &.active {
      background-color: #ffffff;
      color: #000;
      font-weight: 600 !important;
      border-left: 8rpx solid #e4304d;
    }
  }
}

.products {
  display: flex;
  flex-direction: column;
  margin-bottom: 20rpx;
}

.product {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  position: relative;
  .mask {
    width: 540rpx;
    height: 170rpx;
    background: rgba(17, 17, 17, 0.8);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .image {
    width: 170rpx;
    height: 170rpx;
    margin-right: 10rpx;
    flex-shrink: 0;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 170rpx;
    flex: 1;

    .name {
      font-size: 34rpx;
      font-weight: 600;
      width: 360rpx;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
      -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
      line-clamp: 2; /** 显示的行数 **/
      overflow: hidden; /** 隐藏超出的内容 **/
    }

    .labels {
      display: flex;
      font-size: 20rpx;
      margin-bottom: 8rpx;
      overflow: hidden;
      flex-wrap: wrap;
      .label {
        max-width: 40%;
        padding: 6rpx 10rpx;
        margin-right: 10rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .description {
      margin-bottom: 20rpx;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
      color: #777;
      font-size: 24rpx;
    }

    .price {
      font-size: 34rpx;
      color: #ec3e40;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .symbol {
        font-size: 20rpx;
      }
    }
  }
}
</style>
